import React, { Component } from 'react'
import './index.css'

export default class Item extends Component {

  // 初始化状态 
  state = {mouse:false}
  handleCheck = (id) => {
    return (event)=>{
      this.props.updateTodo(id,event.target.checked)
    }
  }


  handleMouse = (isMouse) => {
    return ()=>{
      this.setState({mouse:isMouse})
    }
  }

  // 处理删除的 
  handleDelete = () => {
    if(window.confirm('确定删除吗？')){
      const {id}=this.props.todo
      this.props.handleDelete(id)
    }
   
  }

  render() {
    const {id,name,done}=this.props.todo
    const {mouse}=this.state
    return (
      <div className='todo-item' 
      style={{backgroundColor:mouse ? '#ddd':'#fff'}}
      onMouseEnter={this.handleMouse(true)}
      onMouseLeave={this.handleMouse(false)}
      >
        <input type="checkbox" checked={done} onChange={this.handleCheck(id)} />
        <span>{name}</span>
        <button  onClick={this.handleDelete} style={{display:mouse? 'block':'none'}} className='btn btn-danger'>删除</button>
      </div>
    )
  }
}
